<template>
	<!--技术领域-->
	<div class="container-app">
		<div style="margin-bottom:15px;">
			<el-button v-if="hasAdd" size="small" type="success" @click="addLine"><i class="el-icon-plus"></i>{{addTitle}}</el-button>
			<el-button v-if="hasDel" size="small" type="danger" @click="removeLine"><i class="el-icon-delete"></i>{{delTitle}}</el-button>
			<el-button v-if="hasUpdate" size="small" type="primary" @click="changeLine"><i class="el-icon-edit-outline"></i>{{updateTitle}}</el-button>
			<span class="right-search">
        <el-input @change="findLine" v-model="findData" class="listinput" size="small" placeholder="输入关键字搜索" style="width:300px;">
          <el-button @click="findLine" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-button @click="resetLine" size="mini"><i class="el-icon-refresh"></i>重置</el-button>
      </span>
		</div>
		<!--技术领域属性列表-->
		<el-table @selection-change="getRow" :data="tableData" tooltip-effect="dark" style="width: 100%" border v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.5)">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="mvCode" label="模块值编号"></el-table-column>
			<el-table-column prop="mvTitle" label="模块值名称"></el-table-column>
			<el-table-column prop="description" label="所属模块"></el-table-column>
			<el-table-column prop="mdTypeName" label="所属功能"></el-table-column>
			<el-table-column prop="createName" label="创建人" width="160"></el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
			<!--<el-table-column label="操作" width="300">
				<template slot-scope="scope">
					<el-button type="success" size="mini" @click="viewLine(scope.row)">
						<i class="el-icon-check"></i> 查看详情
					</el-button>
				</template>
			</el-table-column>-->
		</el-table>

		<!--新增修改对话界面-->
		<el-dialog :title="title" :visible.sync="isDialog" width="60%" :before-close="handleClose" :close-on-click-modal='false'>
			<el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="form-submit">
				<el-form-item label="模块名称：" prop="description">
		          <el-input size="small" v-model="ruleForm.description" readonly></el-input>
		        </el-form-item>
		        <el-form-item label="所属功能：" prop="mdTypeName">
		          <el-input size="small" v-model="ruleForm.mdTypeName" readonly></el-input>
		        </el-form-item>
				<el-form-item label="模板值编号：" prop="mvCode">
					<el-input size="small" v-model="ruleForm.mvCode" placeholder="请输入模板值编号"></el-input>
				</el-form-item>
				<el-form-item label="模块值名称：" prop="mvTitle">
					<el-input size="small" v-model="ruleForm.mvTitle" placeholder="请输入模块值名称"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" style="padding-right:30px;">
	        	<el-button size="small" type="success" @click="submitForm('ruleForm')">保存</el-button>
	        	<el-button v-show="changeVisible" size="small" type="warning" @click="resetForm('ruleForm')">重置</el-button>
	       		<el-button size="small" @click="cancleForm('ruleForm')">取消</el-button>
	        </span>
		</el-dialog>
		<!--查看详情-->
		<el-dialog title="模块值信息" :visible.sync="isDetails" width="60%" :before-close="handleClose" :close-on-click-modal='false'>
			<el-form size="small" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="form-submit">
				<el-form-item label="模块名称：" prop="mdTitle">
		          <el-input size="small" v-model="ruleForm.mdTitle" readonly></el-input>
		        </el-form-item>
		        <el-form-item label="所属功能：" prop="mdTypeName">
		          <el-input size="small" v-model="ruleForm.mdTypeName" readonly></el-input>
		        </el-form-item>
				<el-form-item label="模板值编号：" prop="mvCode">
					<el-input size="small" v-model="ruleForm.mvCode" readonly></el-input>
				</el-form-item>
				<el-form-item label="模块值名称：" prop="mvTitle">
					<el-input size="small" v-model="ruleForm.mvTitle" readonly></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" style="padding-right:30px;">
        <el-button size="small" @click="cancleForm('ruleForm')">关闭</el-button>
      </span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getserver,
		postserver
	} from '@/api/basicFunction'
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				inputVisible: false,
				inputValue: '',
				title: '新增模块值信息',
				isDialog: false,
				isDetails: false,
				loading: true,
				isUsable: 1,
				changeVisible: true,
				selectData: [],
				tableData: [],
				ruleForm: {
					mdId:'',
					description: '',
					mdTypeName: '',
					mdType: '',
					mvTitle: '',
					mvId: '',
					mvCode: ''
				},
				removeIds: [],
				wineinfoList: [],
				selectId: '',
				isAdd: true,
				findData: '',
				hasAdd: false,
				hasDel: false,
				hasUpdate: false,
				addTitle: '新增',
				updateTitle: '修改',
				delTitle: '删除',
				rules: {
					mvTitle: [{
						required: true,
						trigger: 'blur',
						message: '请输入模块值名称'
					}]
				},
			}
		},
		computed: {
			...mapGetters(['website'])
		},
		mounted() {
			this.getPageList()
			this.getJur()
		},
		methods: {
			getJur() {
				const self = this
				self.$store.dispatch('Juage', self.$store.clickMenuId).then(res => {
					if(res.code == '200') {
						res.data.forEach(item => {
							if(item.type == '3') {
								self.hasAdd = true
								self.addTitle = item.title
							}
							if(item.type == '5') {
								self.hasDel = true
								self.delTitle = item.title
							}
							if(item.type == '4') {
								self.hasUpdate = true
								self.updateTitle = item.title
							}
						})
					} else if(res.code !== '507') {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			// 获取酒信息列表
			getPageList() {
				this.loading = true
				let query = this.$route.meta.query
				console.log(query)
				const para = {
					mdId: query
				}
				/*getserver({id:mdID.split('=')[1]}, "/md/info").then(res => {
					if(res.code == '200') {
						this.ruleForm.mdTitle= res.data.mdTitle 
						this.ruleForm.mdId= res.data.mdId 
						this.website.modelMenus.forEach(item => {
							if(item.value == res.data.mdType){
								this.ruleForm.mdTypeName = item.title
							}
						});
						this.ruleForm.mdType= res.data.mdType 
						console.log(this.ruleForm)
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})*/
				getserver(para, "/mv/getAllInMd").then(res => {
					if(res.code == '200') {
						this.loading = false
						for(let i=0;i<res.data.length;i++){
							this.website.modelMenus.forEach(item => {
								if(item.value == res.data[i].mdType){
									res.data[i].mdTypeName = item.title
								}
							});
						}
						this.tableData = res.data
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
					this.loading = false
				})
			},
			handleClose() {
				this.isDialog = false
				this.isDetails = false
			},
			submitForm(formName) {
				const self = this
				self.$refs[formName].validate((valid) => {
					if(valid) {
						let para = self.ruleForm
						delete para.mvId
						if(self.isAdd) {
							//添加信息
							postserver(para, "/mv/add").then(res => {
								if(res.code == '200') {
									this.$message({
										type: 'success',
										message: res.message
									})
									self.getPageList()
								} else {
									self.$message({
										type: 'error',
										message: res.message
									})
								}
								self.isDialog = false
								self.$refs[formName].resetFields()
							})
						} else {
							para.id = self.selectId
							//修改信息
							postserver(para, "/mv/update").then(res => {
								if(res.code == '200') {
									self.$message({
										type: 'success',
										message: res.message
									})
									self.getPageList()
								} else {
									self.$message({
										type: 'error',
										message: res.message
									})
								}
								self.isDialog = false
								self.$refs[formName].resetFields()
							})
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			},
			resetForm(formName) {
				this.$refs[formName].resetFields()
				//this.restData()
			},
			cancleForm(formName) {
				this.$refs[formName].resetFields()
				this.isDialog = false
				this.isDetails = false
			},
			removeLine() {
				if(this.selectData.length) {
					this.$confirm('删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						const para = {
							ids: this.removeIds.toString()
						}
						postserver(para, "/wWineinfo/delete").then(res => {
							if(res.code == '200') {
								this.$message({
									type: 'success',
									message: res.message
								})
								this.dataPage = 1
								this.getPageList()
							} else {
								this.$message({
									type: 'success',
									message: res.message
								})
							}
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						})
					})
				} else {
					this.$message('请先选择需要删除的酒信息！')
				}
			},
			restData() {
				const self = this
				self.ruleForm.mdId = ''
				self.ruleForm.mdTitle = ''
				self.ruleForm.mdTypeName = ''
				self.ruleForm.mdType = ''
				self.ruleForm.mvTitle = ''
				self.ruleForm.mvId = ''
				self.ruleForm.mvCode = ''
			},
			addLine() {
				const self = this
				self.title = '新增模块值信息'
				self.isDialog = true
				self.changeVisible = true
				self.isAdd = true
				self.restData()
				let query = this.$route.meta.query
				getserver({id:query}, "/md/info").then(res => {
					if(res.code == '200') {
						this.ruleForm.description= res.data.description 
						this.ruleForm.mdId= res.data.mdId 
						this.website.modelMenus.forEach(item => {
							if(item.value == res.data.mdType){
								this.ruleForm.mdTypeName = item.title
							}
						});
						this.ruleForm.mdType= res.data.mdType 
						console.log(this.ruleForm)
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			changeLine() {
				const self = this
				if(self.selectData.length && self.selectData.length === 1) {
					self.isAdd = false
					self.title = '修改模块值信息'
					self.isDialog = true
					self.changeVisible = false
					
					self.ruleForm.mdId = self.selectData[0].mdId
					self.ruleForm.description = self.selectData[0].description
					self.ruleForm.mdTypeName = self.selectData[0].mdTypeName
					self.ruleForm.mdType = self.selectData[0].mdType
					self.ruleForm.mvTitle = self.selectData[0].mvTitle
					self.ruleForm.mvId = self.selectData[0].mvId
					self.ruleForm.mvCode = self.selectData[0].mvCode
					self.selectId = self.selectData[0].mvId
				} else {
					self.$message('请选择一条信息进行修改！')
				}
			},
			getRow(selection) {
				const self = this
				self.removeIds = []
				self.selectData = selection
				selection.forEach(item => {
					self.removeIds.push(item.id)
				})
			},
			findLine() {
				//let keyword = encodeURIComponent(this.findData)
				const para = {
					row: 10,
					page: 1,
					keyword: this.findData
				}
				this.loading = true
				//关键字搜索行
				getserver(para, "/wWineinfo/searchWineInfo").then(res => {
					if(res.code == '200') {
						this.loading = false
						this.dataTotal = res.data.total
						this.tableData = res.data
					} else {
						this.$message({
							type: 'error',
							message: res.message
						})
					}
				})
			},
			resetLine() {
				this.findData = ''
			},
			viewLine(obj) {
				const self = this
				self.isDetails = true
				self.ruleForm.mdId = obj.mdId
				self.ruleForm.description = obj.description
				self.ruleForm.mdTypeName = obj.mdTypeName
				self.ruleForm.mdType = obj.mdType
				self.ruleForm.mvTitle = obj.mvTitle
				self.ruleForm.mvId = obj.mvId
				self.ruleForm.mvCode = obj.mvCode
			}
		}
	}
</script>

<style scoped>
	.paging {
		padding: 15px;
		padding-right: 0;
	}
	
	.form-submit {
		margin: 0;
		padding-right: 30px;
	}
	
	.el-dialog__header {
		text-align: center;
	}
</style>